<template>
	<view>
		<view class="middle">
			<view @click="openDatetimePicker" class="cancel">
				<view class="fl"><text>*</text>装货时间</view>
				<view class="fr">
					<text>{{loadTime}}</text>
					<image src="../../static/iocn11.png"></image>
				</view>
			</view>

			<view class="content">
				<view class="content_top">
					<view class="content_fl">订金</view>
					<view class="content_fr">
						<view class="viewbox">
							<input type="text" v-model="deposit" placeholder="请输入金额" />
							<text>元</text>
						</view>
						<view class="viewtop">
							<text :class="navIex==0?'active':''" @click="checkdex(0)">可退还</text>
							<text :class="navIex==1?'active':''" @click="checkdex(1)">不可退还</text>
						</view>
					</view>
				</view>
				<view class="content_box">
					<view>（订金支付至平台通宝，货主确认收货后由平台立即退还）</view>
					<text @click="dakai()">展开查看详情 ></text>
				</view>
			</view>

			<view class="paging">
				<view class="fl">总运费</view>
				<view class="fr">
					<input type="text" v-model="amountTotal" placeholder="请输入金额" />
					<text>元/趟</text>
				</view>
			</view>

			<view class="modal">
				<text>备注（选填）</text>
				<input type="text" v-model="remark" placeholder="请填写注意事项" />
			</view>

		</view>


		<view class="footer" @click="WayBillConfirm()">确认</view>


		<!-- 弹窗 -->

		<view class="tancuang" v-show="tancuang">
			<view class="tancuang_key">
				<view class="tancuang_top">
					<view :class="navIndex==0?'active':''" @click="checkIndex(0)">可退还</view>
					<view :class="navIndex==1?'active':''" @click="checkIndex(1)">不可退还</view>
				</view>
				<view v-show="ketihun">
					<view class="tancuang_lis">
						<view>
							<text class="fl">1</text>
							<text class="fr">司机将订金支付至平台</text>
						</view>
						<view>
							<text class="fl">2</text>
							<text class="fr">货主点击“确认收货”</text>
						</view>
						<view>
							<text class="fl">3</text>
							<text class="fr">平台将订金退还至司机</text>
						</view>
					</view>
					<view class="text">若货主未点击“确认收货”，平台将在您点击“已卸货”后24小时内将订金退还</view>
				</view>


				<view v-show="bketihun">
					<view class="tancuang_lis">
						<view>
							<text class="fl">1</text>
							<text class="fr">司机将订金支付至平台</text>
						</view>
						<view>
							<text class="fl">2</text>
							<text class="fr">货主点击“确认收货”</text>
						</view>
						<view>
							<text class="fl">3</text>
							<text class="fr">平台将订金支付至货主</text>
						</view>
					</view>
					<view class="text">若您未点击“已卸货”，平台将据轨迹在最晚卸货时间24小时后将订金支付给货主</view>
				</view>
				<view class="panel" @click="guanbi()">我知道了</view>
			</view>
		</view>


		<SimpleDateTimePicker ref="myPicker" @submit="handleSubmit" :start-year="2000" :end-year="2030" />
	</view>
</template>

<script>
	import {
		GetDics,
		WayBillCreate,
		WayBillConfirm
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";

	export default {
		components: {
			SimpleDateTimePicker,
		},
		data() {
			return {
				loadTime: "请选择装货时间",
				navIndex: 0,
				ketihun: true,
				bketihun: false,
				tancuang: false,
				navIex: 0,
				returnDeposit: true,
				deposit: '',
				amountTotal: '',
				remark: '',

			};
		},

		methods: {
			checkdex(e) {
				this.navIex = e
				if (this.navIex == 0) {
					this.returnDeposit = true
				} else {
					this.returnDeposit = false
				}
			},
			// 打开picker
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},

			// 关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},

			handleSubmit(e) {
				this.loadTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			},

			checkIndex(e) {
				this.navIndex = e
				var navIndex = this.navIndex
				if (navIndex == 0) {
					this.ketihun = true
					this.bketihun = false
				} else {
					this.ketihun = false
					this.bketihun = true
				}
			},

			dakai() {
				this.tancuang = true
			},

			guanbi() {
				this.tancuang = false
			},



			// 确认运单
			async WayBillConfirm() {
				var loadTime = this.loadTime
				var deposit = this.deposit
				var returnDeposit = this.returnDeposit
				var amountTotal = this.amountTotal
				var remark = this.remark
				var id = getValue('yudanid')
				if (loadTime == '请选择装货时间') {
					uni.showToast({
						title: "装货时间不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (deposit == '') {
					uni.showToast({
						title: "定金不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (amountTotal == '') {
					uni.showToast({
						title: "总运费不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				try {
					const {
						data: res
					} = await WayBillConfirm({
						loadTime,
						deposit,
						returnDeposit,
						amountTotal,
						remark,
						id
					})

					uni.showToast({
						title: "提交成功",
						icon: 'none',
					})
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 600)

				} catch (e) {}
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 20upx 15upx;
	}

	.middle {
		border-radius: 17upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		padding: 0 20upx 40upx;

		.cancel {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx 0;
			border-bottom: 1upx solid #e5e5e5;

			.fl {
				display: flex;
				align-items: center;
				font-size: 32upx;
				font-weight: bold;

				text {
					color: #EF4D3D;
				}
			}

			.fr {
				display: flex;
				align-items: center;

				text {
					font-size: 28upx;
					color: #808080;
					margin-right: 20upx;
				}

				image {
					width: 32upx;
					height: 32upx;
				}
			}
		}

		.content {
			padding: 25upx 20upx;
			border-bottom: 1upx solid #e5e5e5;

			.content_top {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.content_fl {
					font-size: 31upx;
					font-weight: bold;
				}

				.content_fr {
					.viewbox {
						display: flex;
						align-items: center;

						input {
							width: 238upx;
							height: 72upx;
							background: #F0F0F0;
							font-size: 28upx;
							margin-right: 30upx;
							text-align: center;
						}

						text {
							font-size: 31upx;
							font-weight: bold;
						}
					}

					.viewtop {
						display: flex;
						align-items: center;
						padding-top: 25upx;

						text {
							width: 155upx;
							height: 50upx;
							border-radius: 10upx;
							background: #fff;
							font-size: 28upx;
							color: #000;
							text-align: center;
							line-height: 46upx;
							margin-left: 10upx;
							border: 2upx solid #EF4D3D;
						}

						.active {
							background-color: #EF4D3D;
							color: #fff;
						}
					}
				}
			}

			.content_box {
				padding-top: 30upx;

				view {
					display: inline-block;
					background-color: rgba(240, 77, 62, 0.1);
					font-size: 21upx;
				}

				text {
					display: block;
					font-size: 21upx;
					font-weight: 400;
					color: rgba(239, 77, 61, 1);
					padding-top: 10upx;
				}
			}
		}

		.paging {
			padding: 30upx 40upx;
			border-bottom: 1upx solid #e5e5e5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.fl {
				font-size: 32upx;
				font-weight: bold;
			}

			.fr {
				display: flex;
				align-items: center;

				input {
					width: 238upx;
					height: 72upx;
					background: #F0F0F0;
					font-size: 28upx;
					margin-right: 30upx;
					text-align: center;
				}

				text {
					font-size: 31upx;
					font-weight: bold;
				}
			}
		}

		.modal {
			padding-top: 45upx;

			text {
				display: block;
				font-size: 32upx;
				font-weight: bold;
				padding-left: 30upx;
			}

			input {
				width: 100%;
				height: 136upx;
				background: #F0F0F0;
				padding: 0 30upx;
				font-size: 28upx;
				margin-top: 25upx;
			}
		}
	}

	.footer {
		width: 526upx;
		height: 71upx;
		line-height: 71upx;
		opacity: 1;
		border-radius: 17upx;
		background: rgba(239, 77, 61, 1);
		font-size: 31upx;
		text-align: center;
		position: fixed;
		bottom: 50upx;
		left: 112upx;
		color: #fff;
		font-weight: bold;
	}


	.tancuang {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		.tancuang_key {
			width: 676upx;
			// height: 560upx;
			background-color: #fff;
			border-radius: 20upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 0 60upx 30upx;

			.tancuang_top {
				display: flex;
				align-items: center;
				padding-top: 20upx;

				view {
					width: 50%;
					text-align: center;
					font-size: 35upx;
					color: #808080;
				}

				.active {
					color: #EF4D3D;
				}
			}

			.tancuang_lis {
				width: 100%;
				padding: 0 70upx 25upx;
				background-color: #e6e6e6;
				margin-top: 26upx;

				view {
					display: flex;
					align-items: center;
					padding-top: 25upx;

					.fl {
						width: 28upx;
						height: 28upx;
						border-radius: 50%;
						background-color: #EF4D3D;
						font-size: 24upx;
						color: #fff;
						text-align: center;
						line-height: 28upx;
						margin-right: 40upx;
					}

					.fr {
						font-size: 29upx;
					}
				}
			}

			.text {
				font-size: 24upx;
				color: #383838;
				padding-top: 20upx;
			}

			.panel {
				width: 231upx;
				color: #fff;
				background-color: #EF4D3D;
				height: 72upx;
				text-align: center;
				line-height: 72upx;
				margin: 0 auto;
				border-radius: 10upx;
				font-size: 31upx;
				margin-top: 20upx;
			}
		}
	}
</style>
